<!DOCTYPE html>
<html>
<head>
<title>云服务列表</title> 
	{{>/WEB-INF/pages/common/meta_base.part.html}}
	{{>/WEB-INF/pages/common/refs_base.part.html}}
	{{>/WEB-INF/pages/common/refs_modal.part.html}}
</head>
<body>
	{{>/WEB-INF/pages/common/layout_header.part.html}} 
	<div class="container">
		<ul class="breadcrumb">
		  <li><a href="{{ctx}}">首页</a></li>
		  <li class="active">云服务</li>
		</ul>
		<hr class="hr1" />
		<div class="hr-10"></div>
		<div class="hr-10"></div>
		<div class="hr-10"></div>
		<div class="row">
			{{#clouds}}
			<div class="col-sm-4">
			<div class="pad-st-a10 widmx400px box-st-link">
				<div class="col-sm-3 col-xs-4 pad-st-b10 text-center"><img src="{{ctx}}/{{#icon}}{{icon}}{{/icon}}{{^icon}}static/bsl/images/icon_03.png{{/icon}}" /></div>
				<div class="col-sm-8">
					<h5>{{name}}</h5>
					<p>{{description}}</p>
					<p>已经关联应用{{appCount}}个</p>
				</div>
				<div class="hr"></div>
				<div class="text-right pad-st-b10">
                    <a class="cloudlink btn btn-primary" href="{{ctx}}/system/cloud/unlinkable-apps/{{id}}">取消关联应用</a>
					<a class="cloudlink btn btn-primary mar-st-r10" href="{{ctx}}/system/cloud/available-apps/{{id}}">添加关联应用</a>
					<a class="cloudlink btn btn-common" href="{{ctx}}/system/cloud/linked-apps/{{id}}">使用服务</a>
				</div>
			</div>
			</div>
			{{/clouds}}
			<div class="height"></div>
		</div>
        <div id="ajax-modal" data-backdrop="static" class="modal fade" tabindex="-1" style="display: none;"></div>
		{{>/WEB-INF/pages/common/layout_footer.part.html}}
	</div>
	<script type="text/javascript">
	$(document).ready(function(){
		var $modal = $('#ajax-modal');
		$('a.cloudlink').on('click', function(evt){
			evt.preventDefault();
			var href=evt.target.href;
			// create the backdrop and wait for next modal to be triggered
			//$('body').modalmanager('loading');
			$modal.load(href, '', function(){
		    	$modal.modal();
		    });
			return false;
		});
	});
	</script>
</body>
</html>
